<template>
    <div class="login-container">
        <Form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
            <h3 class="title">有车易后台管理系统</h3>
            <FormItem prop="username" class="custom-form-item">
                <Input class="custom-input" prefix="ios-person-outline" v-model="loginForm.username" size="large" name="username" type="text" auto-complete="on" placeholder="username" />
            </FormItem>
            <FormItem prop="password" class="custom-form-item">
                <Input  class="custom-input" prefix="ios-lock-outline" :type="pwdType" size="large" v-model="loginForm.password" name="password" auto-complete="on" placeholder="password" @keyup.enter.native="handleLogin" />
                <span class="show-pwd" @click="showPwd">
                        <Icon :type="iconType" size="24" />
                    </span>
            </FormItem>
            <FormItem class="custom-form-item">
                <Button size="large" :loading="isLoading" type="primary" style="width:100%;" @click="handleSubmit">登录</Button>
            </FormItem>
            <div class="tips">
                <span> 这里是提示</span>
            </div>
        </Form>
    </div>
</template>

<script>
import {
  mapActions
} from 'vuex'
export default {
  data () {
    return {
      isLoading: false,
      iconType: 'ios-eye',
      loginForm: {
        username: 'admin',
        password: 'anyuan888'
      },
      loginRules: {
        username: [{
          required: true,
          trigger: 'blur',
          validator: validateUsername
        }],
        password: [{
          required: true,
          trigger: 'blur',
          validator: validatePass
        }]
      },
      pwdType: 'password'
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    showPwd () {
      if (this.pwdType === 'password') {
        this.iconType = 'ios-eye'
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
        this.iconType = 'ios-eye-off'
      }
    },
    handleSubmit () {
      this.isLoading = true
      console.log(this.loginForm)
      this.handleLogin(this.loginForm).then(res => {
        this.getUserInfo().then(res => {
          this.isLoading = false
          this.$router.push({
            name: 'home'
          })
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
    .login-container {
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: #2d3a4b;
        .login-form {
            position: absolute;
            left: 0;
            right: 0;
            width: 520px;
            max-width: 100%;
            padding: 35px 35px 15px 35px;
            margin: 120px auto;
        }
        .tips {
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;
            span {
                &:first-of-type {
                    margin-right: 16px;
                }
            }
        }
        .title {
            font-size: 26px;
            font-weight: 400;
            color: #eee;
            margin: 0px auto 40px auto;
            text-align: center;
            font-weight: bold;
        }
        .show-pwd {
            position: absolute;
            right: 10px;
            top: 3px;
            color: #889aa4;
            cursor: pointer;
            user-select: none;
            z-index: 2;
        }
    }
</style>
